<template>
  <div class="info-container">
    <van-nav-bar title="账户信息"
                 left-arrow
                 @click-left="$router.back()"
                 class="navBar" />
    <input type="file"
           style="display:none"
           ref="inputFile"
           @change="onFileChange" />
    <van-cell-group>
      <van-cell title="头像"
                is-link
                class="avatar-wrap"
                @click="$refs.inputFile.click()">
        <template slot="default">
          <van-image round
                     fit="cover"
                     :src="'https://elm.cangdu.org/img/' + userProfile.avatar"
                     class="avatar" />
        </template>
      </van-cell>
      <van-cell title="用户名"
                :value="userProfile.username"
                is-link
                @click="$router.push('/profile/info/setusername')" />
      <van-cell title="收货地址"
                is-link
                @click="$router.push('/profile/info/address')" />
    </van-cell-group>
    <p class="title">账号绑定</p>
    <van-cell title="手机" is-link icon="graphic" @click="$toast.fail('需在手机上设置!');"/>
    <p class="title">安全设置</p>
    <van-cell title="登录密码"
              value="修改"
              is-link
              @click="$router.push('/forget')" />
    <div class="btn">
      <van-button type="info"
                  @click="logout">退 出 登 录</van-button>
    </div>
  </div>
</template>

<script>
import { updateAvatar, getUserInfo } from "@/api/profile";
import { mapState, mapMutations } from "vuex";
import { setAvatar, getAvatar, removeAvatar } from "@/utils/storage";

export default {
  name: "info",
  data () {
    return {
      userProfile: "",
    };
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    // 选择头像后更新
    async onFileChange () {
      const file = this.$refs.inputFile.files[0];
      const formData = new FormData();
      formData.append("file", file);
      const { data } = await updateAvatar(formData);
      if (data.status !== 1) return this.$toast.fail("头像上传失败!");
      this.userProfile.avatar = data.image_path;
      setAvatar("avatar", data.image_path);
      this.$toast.success("用户头像修改成功!");
    },
    // 页面显示获取用户信息
    async getUserInfo () {
      const { data } = await getUserInfo(this.userInfo.user_id);
      this.userProfile = data;
      this.userProfile.username =
        getAvatar("userName") || this.userProfile.username;
      this.userProfile.avatar = getAvatar("avatar") || this.userProfile.avatar;
    },
    // 退出登录
    logout () {
      this.$router.push('/login')
      removeAvatar('avatar')
      removeAvatar('userName')
      this.setUserInfo({})
      localStorage.removeItem('userInfo')
    }
  },
  created () {
    this.getUserInfo();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.info-container {
  /deep/.navBar {
    margin-bottom: 10px;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-arrow-left {
      font-size: 18px;
      color: #fff;
    }
  }
  .avatar-wrap {
    align-items: center;
    .van-cell__right-icon,
    .van-cell__title {
      display: flex;
      align-items: center;
    }
    .avatar {
      width: 50px;
      height: 50px;
    }
  }
  .title {
    padding-left: 15px;
    font-size: 12px;
    color: #666;
  }
  .van-icon-graphic {
    font-size: 18px;
    color: #10aeff;
  }
  .btn {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    .van-button--info {
      width: 90%;
      border-radius: 8px;
      font-size: 18px;
    }
  }
}
</style>
